<template>
  <div class="box">
    <div class="dangers">平台高峰预警信息(3)</div>
    <div class="map" ref="map"></div>
  </div>
</template>

<script lang="ts" setup name="CenterTop">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
//中国地图JSON数据
import chinaJSON from './China.json'
let map = ref()
//注册中国地图
echarts.registerMap('china', chinaJSON as any)
//中国地图航线
onMounted(() => {
  let mycharts = echarts.init(map.value)
  mycharts.setOption({
    geo: {
      map: 'china',
      roam: true,
      left: 100,
      right: 100,
      top: 0,
      bottom: 0,
      label: {
        show: true,
        color: 'white',
        fontSize: '15px',
      },
      shadowOffsetX: '3',
      shadowOffsetY: '3',
      itemStyle: {
        color: 'rgba(0, 105, 233, 0.86)',
        shadowColor: 'rgba(25, 85, 150, 0.86)',
        shadowOffsetX: '3',
        shadowOffsetY: '3',
      },
      emphasis: {
        itemStyle: {
          color: 'white',
        },
        label: {
          fontSize: 45,
          color: 'black',
        },
      },
    },
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
    xAxis: { show: false },
    yAxis: { show: false },

    series: [
      {
        type: 'lines',
        data: [
          {
            coords: [
              [116.405285, 39.904989],
              [91.132212, 29.660361],
            ],

            lineStyle: {
              color: 'white',
              width: 1,
              curveness: 0.2,
            },
          },
        ],
        effect: {
          show: true,
          symbol:
            'path://M922.6 698.6v-74.7l-335.9-224V138.6S586.7 64 512 64s-74.7 74.6-74.7 74.6v261.3L101.4 624v74.7l335.9-112v209.1l-112 89.6V960L512 885.3l186.6 74.6v-74.6l-112-89.6V586.6l336 112z',
          symbolSize: 30,
          color: 'white',
          delay: 1000,
          constantSpeed: 20,
          roundTrip: true,
        },
      },
      {
        type: 'lines',
        data: [
          {
            coords: [
              [116.405285, 39.904989],
              [87.617733, 43.792818],
            ],
            lineStyle: {
              color: 'skyblue',
              width: 1,
              curveness: 0.2,
            },
          },
        ],
        effect: {
          show: true,
          symbol:
            'path://M922.6 698.6v-74.7l-335.9-224V138.6S586.7 64 512 64s-74.7 74.6-74.7 74.6v261.3L101.4 624v74.7l335.9-112v209.1l-112 89.6V960L512 885.3l186.6 74.6v-74.6l-112-89.6V586.6l336 112z',
          symbolSize: 30,
          color: 'white',
          constantSpeed: 80,
          loop: true,
          roundTrip: true,
        },
      },
      {
        type: 'lines',
        data: [
          {
            coords: [
              [116.405285, 39.904989],
              [113.280637, 23.125178],
            ],
            lineStyle: {
              width: 2,
              curveness: 0.2,
            },
          },
        ],
        effect: {
          show: true,
          symbol:
            'path://M922.6 698.6v-74.7l-335.9-224V138.6S586.7 64 512 64s-74.7 74.6-74.7 74.6v261.3L101.4 624v74.7l335.9-112v209.1l-112 89.6V960L512 885.3l186.6 74.6v-74.6l-112-89.6V586.6l336 112z',
          symbolSize: 30,
          color: 'white',
          constantSpeed: 80,
          loop: true,
          roundTrip: true,
        },
      },
      {
        type: 'lines',
        data: [
          {
            coords: [
              [126.642464, 45.756967],
              [113.280637, 23.125178],
            ],
            lineStyle: {
              width: 1,
              curveness: 0.2,
            },
          },
        ],
        effect: {
          show: true,
          symbol:
            'path://M922.6 698.6v-74.7l-335.9-224V138.6S586.7 64 512 64s-74.7 74.6-74.7 74.6v261.3L101.4 624v74.7l335.9-112v209.1l-112 89.6V960L512 885.3l186.6 74.6v-74.6l-112-89.6V586.6l336 112z',
          symbolSize: 30,
          color: 'white',
          constantSpeed: 20,
          loop: true,
          roundTrip: true,
        },
      },
      {
        type: 'lines',
        data: [
          {
            coords: [
              [126.642464, 45.756967],
              [111.670801, 40.818311],
            ],
            lineStyle: {
              width: 1,
              curveness: -0.2,
            },
          },
        ],
        effect: {
          show: true,
          symbol:
            'path://M922.6 698.6v-74.7l-335.9-224V138.6S586.7 64 512 64s-74.7 74.6-74.7 74.6v261.3L101.4 624v74.7l335.9-112v209.1l-112 89.6V960L512 885.3l186.6 74.6v-74.6l-112-89.6V586.6l336 112z',
          symbolSize: 30,
          color: 'white',
          constantSpeed: 10,
          loop: true,
          roundTrip: true,
        },
      },
      {
        type: 'lines',
        data: [
          {
            coords: [
              [111.670801, 40.818311],
              [113.665412, 34.757975],
            ],
            lineStyle: {
              width: 1,
              curveness: 0.2,
            },
          },
        ],
        effect: {
          show: true,
          symbol:
            'path://M922.6 698.6v-74.7l-335.9-224V138.6S586.7 64 512 64s-74.7 74.6-74.7 74.6v261.3L101.4 624v74.7l335.9-112v209.1l-112 89.6V960L512 885.3l186.6 74.6v-74.6l-112-89.6V586.6l336 112z',
          symbolSize: 30,
          color: 'white',
          constantSpeed: 10,
          loop: true,
          roundTrip: true,
        },
      },
      {
        type: 'lines',
        data: [
          {
            coords: [
              [113.665412, 34.757975],
              [113.280637, 23.125178],
            ],
            lineStyle: {
              width: 1,
              curveness: 0.2,
            },
          },
        ],
        effect: {
          show: true,
          symbol:
            'path://M922.6 698.6v-74.7l-335.9-224V138.6S586.7 64 512 64s-74.7 74.6-74.7 74.6v261.3L101.4 624v74.7l335.9-112v209.1l-112 89.6V960L512 885.3l186.6 74.6v-74.6l-112-89.6V586.6l336 112z',
          symbolSize: 30,
          color: 'white',
          constantSpeed: 10,
          loop: true,
          roundTrip: true,
        },
      },
      {
        type: 'lines',
        data: [
          {
            coords: [
              [116.405285, 39.904989],
              [101.778916, 36.623178],
            ],
            lineStyle: {
              color: 'white',
              width: 1,
              curveness: 0.2,
            },
          },
        ],
        effect: {
          show: true,
          symbol:
            'path://M922.6 698.6v-74.7l-335.9-224V138.6S586.7 64 512 64s-74.7 74.6-74.7 74.6v261.3L101.4 624v74.7l335.9-112v209.1l-112 89.6V960L512 885.3l186.6 74.6v-74.6l-112-89.6V586.6l336 112z',
          symbolSize: 30,
          color: 'white',
          delay: 1000,
          constantSpeed: 20,
          roundTrip: true,
        },
      },
      {
        type: 'lines',
        data: [
          {
            coords: [
              [126.642464, 45.756967],
              [87.617733, 43.792818],
            ],
            lineStyle: {
              color: 'white',
              width: 1,
              curveness: 0.2,
            },
          },
        ],
        effect: {
          show: true,
          symbol:
            'path://M922.6 698.6v-74.7l-335.9-224V138.6S586.7 64 512 64s-74.7 74.6-74.7 74.6v261.3L101.4 624v74.7l335.9-112v209.1l-112 89.6V960L512 885.3l186.6 74.6v-74.6l-112-89.6V586.6l336 112z',
          symbolSize: 30,
          color: 'white',
          constantSpeed: 20,
          loop: true,
          roundTrip: true,
        },
      },
      {
        type: 'lines',
        data: [
          {
            coords: [
              [126.642464, 45.756967],
              [102.712251, 25.040609],
            ],
            labelline: {
              lineStyle: {
                color: 'white',
                width: 7,
              },
            },
          },
        ],
        effect: {
          show: true,
          symbol:
            'path://M922.6 698.6v-74.7l-335.9-224V138.6S586.7 64 512 64s-74.7 74.6-74.7 74.6v261.3L101.4 624v74.7l335.9-112v209.1l-112 89.6V960L512 885.3l186.6 74.6v-74.6l-112-89.6V586.6l336 112z',
          symbolSize: 30,
          color: 'white',
          constantSpeed: 20,
          loop: true,
          roundTrip: true,
        },
      },
      {
        type: 'lines',
        data: [
          {
            coords: [
              [104.065735, 30.659462],
              [87.617733, 43.792818],
            ],
            lineStyle: {
              width: 1,
              curveness: 0.2,
            },
          },
        ],
        effect: {
          show: true,
          symbol:
            'path://M922.6 698.6v-74.7l-335.9-224V138.6S586.7 64 512 64s-74.7 74.6-74.7 74.6v261.3L101.4 624v74.7l335.9-112v209.1l-112 89.6V960L512 885.3l186.6 74.6v-74.6l-112-89.6V586.6l336 112z',
          symbolSize: 30,
          color: 'white',
          constantSpeed: 20,
          loop: true,
          roundTrip: true,
        },
      },
      {
        type: 'lines',
        data: [
          {
            coords: [
              [121.509062, 25.044332],
              [87.617733, 43.792818],
            ],
            lineStyle: {
              color: 'green',
              width: 1,
              curveness: 0.2,
            },
          },
        ],
        effect: {
          show: true,
          symbol:
            'path://M922.6 698.6v-74.7l-335.9-224V138.6S586.7 64 512 64s-74.7 74.6-74.7 74.6v261.3L101.4 624v74.7l335.9-112v209.1l-112 89.6V960L512 885.3l186.6 74.6v-74.6l-112-89.6V586.6l336 112z',
          symbolSize: 30,
          color: 'white',
          constantSpeed: 20,
          loop: true,
          roundTrip: true,
        },
      },
      {
        type: 'lines',
        data: [
          {
            coords: [
              [102.712251, 25.040609],
              [87.617733, 43.792818],
            ],
            lineStyle: {
              color: 'yellow',
              width: 1,
              curveness: 0.2,
            },
          },
        ],
        effect: {
          show: true,
          symbol:
            'path://M922.6 698.6v-74.7l-335.9-224V138.6S586.7 64 512 64s-74.7 74.6-74.7 74.6v261.3L101.4 624v74.7l335.9-112v209.1l-112 89.6V960L512 885.3l186.6 74.6v-74.6l-112-89.6V586.6l336 112z',
          symbolSize: 30,
          color: 'white',
          constantSpeed: 20,
          loop: true,
          roundTrip: true,
        },
      },
      {
        type: 'lines',
        data: [
          {
            coords: [
              [110.33119, 20.031971],
              [87.617733, 43.792818],
            ],
            lineStyle: {
              color: 'yellow',
              width: 1,
              curveness: 0.2,
            },
          },
        ],
        effect: {
          show: true,
          symbol:
            'path://M922.6 698.6v-74.7l-335.9-224V138.6S586.7 64 512 64s-74.7 74.6-74.7 74.6v261.3L101.4 624v74.7l335.9-112v209.1l-112 89.6V960L512 885.3l186.6 74.6v-74.6l-112-89.6V586.6l336 112z',
          symbolSize: 30,
          color: 'white',
          constantSpeed: 20,
          loop: true,
          roundTrip: true,
        },
      },
      {
        type: 'lines',
        data: [
          {
            coords: [
              [130, 20],
              [87.617733, 43.792818],
            ],
            lineStyle: {
              color: 'blue',
              width: 1,
              curveness: 0.2,
            },
          },
        ],
        effect: {
          show: true,
          symbol:
            'path://M922.6 698.6v-74.7l-335.9-224V138.6S586.7 64 512 64s-74.7 74.6-74.7 74.6v261.3L101.4 624v74.7l335.9-112v209.1l-112 89.6V960L512 885.3l186.6 74.6v-74.6l-112-89.6V586.6l336 112z',
          symbolSize: 30,
          color: 'white',
          constantSpeed: 20,
          loop: true,
          roundTrip: true,
          trailLength: 0.001,
        },
      },
    ],
  })
})
</script>
<style scoped lang="scss">
.box {
  height: 100%;
  padding: 15px 0px;
  color: white;
  .dangers {
    width: 644px;
    height: 44px;
    margin: 0px auto;
    text-align: center;
    line-height: 42px;
    font-weight: bold;
    background: url('../../images/dataScreen-header-warn-bg.png') no-repeat;
    background-size: cover;
  }
  .map {
    // background: url('../../images') no-repeat;
    height: 100%;
  }
}
</style>
